/** selGraph(gType)
 *  Given the type of graph, loads the correct store.
 *  @param gType String that Specifiies type of graph. This value comes directly from the bpack server
 */
function selGraph(gType)
{
    if (gType == "barCard" ) {
        bpack.views.bar.chart.axes.items[0].maximum = barHeight;
        window.storeBar.loadData(grphCur);
        bpack.views.bar.chart.bindStore( window.storeBar);
    }
    else if (gType == "pieCard" ) {
        window.storePie.loadData(grphCur, false);
        bpack.views.data.chart.bindStore(window.storePie);
        }
    else if (gType == "multiBarCard" ) {
        bpack.views.multibar.toolbar.setTitle(multibarTitle);
        window.storeMultiBar.loadData(grphCur,false);
        bpack.views.multibar.chart.bindStore(window.storeMultiBar);
    }
}
//---------Define colors
var orange = {
    style: "background-color: orange; color: white;",
    title: "orange",
    html: "orange"
}

//---------home
bpack.views.home = {};
bpack.views.home.logoutButton = new Ext.Button({
    ui:'action',
    text: 'Logout',
    backTo: 'signing',
    listeners: {tap: function () {
        bpack.views.cards.setActiveItem('signinCard', {type:'fade'});
    }},
    style: "background: black; color: white;border-color:orange"
})
bpack.views.home.toolbar = new Ext.Toolbar({
    //xtype: 'toolbar',
    style: "background: darkorange; color: black;border-color:darkorange",
    //ui: 'light',
    title: "Menu",
    items: [bpack.views.home.logoutButton],
    
    
});
bpack.views.home.menuButton = new Ext.Button({
    ui: 'round',
    text: 'Reports',
    margin: '50,80,50,80', 
    listeners: {tap: function () {
        bpack.views.cards.setActiveItem('gilistsCard', {type: 'fade'});
    }},
    style: "color: bliack;border-color:lightgrey"
})
bpack.views.home.card = new Ext.Panel({
    id: 'homeCard',
    dockedItems: [bpack.views.home.toolbar],
    items: [
            bpack.views.home.menuButton,
            {minWidth: '100'},
            {style: {marginBottom: '10px'}}
        ],
    style: 'background:#E7E7E9;'
})
//--------gilists
bpack.views.gilists = {};
bpack.views.gilists.backButton = new Ext.Button({
    style: "background: black; color: white;border-color:orange",
    ui:'back',
    text: 'Menu',
    listeners: {tap: function () {
        bpack.views.cards.setActiveItem('homeCard', {type:'fade'});
    }}
});
bpack.views.gilists.toolbar = new Ext.Toolbar({
    title: "Report Categories",
    style: "background: darkorange; color: black;border-color:darkorange",
    items: [bpack.views.gilists.backButton]
});
bpack.views.gilists.list = new Ext.List({
    store: null,
    itemTpl: '{lastName}', //Specificies the field to display
    style: " color: white;border-color:white",
    listeners: {
        selectionchange: function (selectionModel, records) {
            if (records[0]) {
                bpack.currentgilists = records[0];
                bpack.views.cards
                    .setActiveItem('gilistCard')
                    .getActiveItem().update(records[0]);
            }
        }
    }
    
});
bpack.views.gilists.card = new Ext.Panel({
    id: 'gilistsCard',
    //defaults: {style: "background: lightgrey; color: white;border-color:white"},
    dockedItems: [bpack.views.gilists.toolbar],
    items: [bpack.views.gilists.list],
    update: function(backTo, text) {
        bpack.views.gilists.backButton.setText(text).backTo = backTo;
        return this;
    },
    style: 'background:#E7E7E9;'
});

//--------gilist
bpack.views.gilist = {};
bpack.views.gilist.toolbar = new Ext.Toolbar({
    style: "background: darkorange; color: black;border-color:darkorange",
    title: 'Choose a graph...',
    items: [{
        ui: 'back',
        text: 'Back',
        listeners: {tap: function () {
            bpack.views.cards.setActiveItem('gilistsCard', {type:'fade'});
        }}
    }]
});
bpack.views.gilist.card = new Ext.Panel({

    id: 'gilistCard',
    layout: 'fit',
    dockedItems: [bpack.views.gilist.toolbar],
    items: [
        (
            bpack.views.gilist.list = new Ext.List({
                store: null,
                itemTpl: '{RRNAME}',
                listeners: {
                    selectionchange: function (selectionModel, records) {
                        if (records[0]) {
                            var graphType = getGJson(records[0].data.RTYPE, records[0].data.REQREPORTID, records[0].data.RRLABEL);
                            selGraph(graphType);
                            bpack.views.cards.setActiveItem(graphType).getActiveItem().update();
                        }
                    }
                }
            })
        )
    ],
    update: function (gilist) {//gilist is item clicked on from gilists.list
        bpack.views.gilist.toolbar.setTitle(gilist.get('lastName'));
        var value=gilist.get('firstName');
        bpack.views.gilist.list.bindStore(bpack.models.gilist.prototype.getStore(value));
    },
    style: 'background:#E7E7E9;'
});

//--------data---Pie Chart
bpack.views.data = {};
bpack.views.data.backButton = new Ext.Button({
    ui: 'back',
    text: 'Back',
    listeners: {tap: function () {
        bpack.views.cards.setActiveItem('gilistCard', {type: 'fade'});
        grphArr = new Array();
        grphTable = new Array();
        grphCur = new Array();
    }}
})
bpack.views.data.toolbar = new Ext.Toolbar({
    style: "background: darkorange; color: black;border-color:darkorange",
    resizable: true,
    title: "Pie Graph",
    dock: "top",
    width: screen.availWidth,
    items: [bpack.views.data.backButton]
    /*
    xtype: 'toolbar',
    ui: 'light'*/
});
bpack.views.data.chart = new Ext.chart.Chart({
        cls: 'pie1',
        theme: 'Demo',
        store: storePie,
        shadow: false,
        //animate: true,
        //insetPadding: 5,
        legend: /*{
            position: {
                portrait: 'bottom',
                landscape: 'top'
            }
        }
        */
        {
            position: {
                portrait: 'bottom',
                landscape: 'left'
            },
            labelFont: '17px Arial'
        },
        interactions: [{
            type: 'reset',
            confirm: true
        },
        {
            type: 'rotate'
        },
        {
            type: 'iteminfo',
            gesture: 'tap',
            listeners: {
                show: function(interaction, item, panel) {
                    var storeItem = item.storeItem;
                    panel.update(['<ul><li><b>Item: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('value') + '</li></ul>'].join(''));
                }
            }
        }
    ],
        series: [{
            type: 'pie',
            field: 'value',
            showInLegend: true,
            highlight: false,
            listeners: {
                'labelOverflow': function(label, item) {
                    item.useCallout = true;
                }
            },
            // Example to return as soon as styling arrives for callouts
            callouts: {
                renderer: function(callout, storeItem) {
                    callout.label.setAttributes({
                        text: storeItem.get('name')
                    }, true);
                },
                filter: function() {
                    return false;
                },
                box: {
                  //no config here.
                },
                lines: {
                    'stroke-width': 2,
                    offsetFromViz: 20
                },
                label: {
                   font: 'italic 14px Arial'
                },
                styles: {
                    font: '14px Arial'
                }
            },
            label: {
                field: 'name'
            }
        }]
})
bpack.views.data.card = new Ext.chart.Panel({
    id: 'pieCard',
    layout: 'fit',
    dockedItems: [bpack.views.data.toolbar],
    items: [bpack.views.data.chart],
    update : function () {
        bpack.views.data.toolbar.setTitle(pieTitle);
        window.storePie.loadData(grphCur);
        bpack.views.data.chart.bindStore(window.storePie);
    }
});


//--------data---Bar Graph
bpack.views.bar = {};
bpack.views.bar.backButton = new Ext.Button({
    ui: 'back',
    text: 'Back',
    listeners: {tap: function () {
        bpack.views.cards.setActiveItem('gilistCard', {type: 'fade'});
    }}
})
bpack.views.bar.toolbar = new Ext.Toolbar({
    style: "background: darkorange; color: black;border-color:darkorange",
    xtype: 'toolbar',
    resizable: true,
    ui: 'light',
    title: barTitle,
    dock: "top",
    width: screen.availWidth - 5,
    items: [bpack.views.bar.backButton]
    /*
    width: screen.availWidth,
    title: "Bar Graph",
    xtype: 'toolbar',
    ui:'light',
    items: [bpack.views.bar.backButton]
    */
});
bpack.views.bar.chart = new Ext.chart.Chart({
        cls: 'column1',
        animate: {
            easing: 'bounceOut',
            duration: 750
        },
        store: storeBar,
        shadow: false,
        gradients: [{
            'id': 'v-1',
            'angle': 0,
            stops: {
                0: {
                    color: 'rgb(212, 40, 40)'
                },
                100: {
                    color: 'rgb(117, 14, 14)'
                }
            }
        },
        {
            'id': 'v-2',
            'angle': 0,
            stops: {
                0: {
                    color: 'rgb(180, 216, 42)'
                },
                100: {
                    color: 'rgb(94, 114, 13)'
                }
            }
        },
        {
            'id': 'v-3',
            'angle': 0,
            stops: {
                0: {
                    color: 'rgb(43, 221, 115)'
                },
                100: {
                    color: 'rgb(14, 117, 56)'
                }
            }
        },
        {
            'id': 'v-4',
            'angle': 0,
            stops: {
                0: {
                    color: 'rgb(45, 117, 226)'
                },
                100: {
                    color: 'rgb(14, 56, 117)'
                }
            }
        },
        {
            'id': 'v-5',
            'angle': 0,
            stops: {
                0: {
                    color: 'rgb(187, 45, 222)'
                },
                100: {
                    color: 'rgb(85, 10, 103)'
                }
            }
        }],
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['value'],
            minimum: 0,
            maximum: 100,
            label: {
                renderer: function(v) {
                    return v.toFixed(0);
                }
            },
            title: xTitle
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Categories'
        }],
        series: [{
            type: 'column',
            axis: 'left',
            highlight: true,
            renderer: function(sprite, storeItem, barAttr, i, store) {
                barAttr.fill = colors[i % colors.length];
                return barAttr;
            },
            label: {
              field: 'value'
            },
            xField: 'name',
            yField: 'value'
        }],
        interactions: [{
            type: 'iteminfo',
            gesture: 'tap',
            listeners: {
                show: function(interaction, item, panel) {
                    var storeItem = item.storeItem;
                    panel.update(['<ul><li><b>Item: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('value') + '</li></ul>'].join(''));
                }
            }
        }]
    
})
bpack.views.bar.card = new Ext.chart.Panel({
    id: 'barCard',
    layout: 'fit',
    dockedItems: [bpack.views.bar.toolbar],
    items: [bpack.views.bar.chart],
    update : function () {
        bpack.views.bar.chart.axes.items[0].title = xTitle;
        bpack.views.bar.chart.axes.items[0].maximum = barHeight;
        bpack.views.bar.toolbar.setTitle(barTitle);
        window.storeBar.loadData(grphCur);
        bpack.views.bar.chart.bindStore(window.storeBar);
    }
});
//--------data---MultiBar Chart
bpack.views.multibar = {};
bpack.views.multibar.backButton = new Ext.Button({
    ui: 'back',
    text: 'Back',
    dock: 'left',
    listeners: {tap: function () {
        bpack.views.cards.setActiveItem('gilistCard', {type: 'fade'});
        axisName = new Array();
	axisValues = new Array();
    }}
})
bpack.views.multibar.toolbar = new Ext.Toolbar({
    style: "background: darkorange; color: black;border-color:darkorange",
    resizable: true,
    title: "MultiBar Graph",
    dock: "left",
    width: screen.availWidth,
    items: [bpack.views.multibar.backButton]
});
bpack.views.multibar.chart = new Ext.chart.Chart({
    cls: 'bar1',
    theme: 'Demo',
    store: window.storeMultiBar,
    animate: true,
    shadow: false,
    legend: {
        position: {
            portrait: 'right',
            landscape: 'top'
        },
        labelFont: '17px Arial'
    },
    interactions: [{
        type: 'reset'
    },
    {
        type: 'togglestacked'
    },
    {
        type: 'iteminfo',
        gesture: 'taphold',
        panel: {
            dockedItems: [{
                dock: 'top',
                xtype: 'toolbar',
                title: 'Details'
            }],

            html: 'Testing'
        },
        listeners: {
            'show': function(me, item, panel) {
                panel.update('<ul><li><b>Month:</b> ' + item.value[0] + '</li><li><b>Value: </b> ' + item.value[1] + '</li></ul>');
            }
        }
    },
    {
        type: 'itemcompare',
        offset: {
            x: -10
        },
        listeners: {
            'show': function(interaction) {
                var val1 = interaction.item1.value,
                    val2 = interaction.item2.value;
                bpack.views.multibar.toolbar.setTitle('Change : ' + Math.round((val2[1] - val1[1]) / val1[1] * 100) + '%');//val1[0] + ' to ' + val2[0] + ' : ' + Math.round((val2[1] - val1[1]) / val1[1] * 100) + '%'
                bpack.views.multibar.card.headerPanel.setActiveItem(1, {
                    type: 'slide',
                    direction: 'right'
                });
            },
            'hide': function() {
                bpack.views.multibar.toolbar.setTitle(multibarTitle);
                bpack.views.multibar.card.headerPanel.setActiveItem(0, {
                    type: 'slide',
                    direction: 'right'
                });
            }
        }
    }],
    axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: axisValues,
        label: {
            renderer: function(v) {
                return v.toFixed(0);
            }
        },
        title: xTitle,
        minimum: 0
    },
    {
        type: 'Category',
        position: 'left',
        fields: axisName,
        title: 'Category'
    }],
    series: [{
        type: 'bar',
        xField: axisName[0],
        yField: axisValues,
        axis: 'bottom',
        highlight: true,
        showInLegend: true
    }]
    
})
bpack.views.multibar.card = new Ext.chart.Panel({
    id: 'multiBarCard',
    //title: multibarTitle,
    preventHeader: true,
    layout: 'fit',
    dockedItems: [bpack.views.multibar.toolbar],
    items: [bpack.views.multibar.chart],
    update : function () {
        bpack.views.multibar.chart.axes.items[0].title = xTitle;
        window.storeMultiBar.loadData(grphCur, false);
        bpack.views.multibar.card.title = multibarTitle;//bpack.views.multibar.card.descriptionPanel.setTitle(multibarTitle);//this.setTitle(multibarTitle),//bpack.views.multibar.toolbar.setTitle(multibarTitle);
        
        bpack.views.multibar.chart.bindStore(window.storeMultiBar);
    }
});

//--------data---area Chart
bpack.views.area = {};
bpack.views.area.toolbar = new Ext.Toolbar({
    style: "background: darkorange; color: black;border-color:darkorange",
//    xtype: 'toolbar',
    ui:'light',
    items: [{ //Back Button configurations
        ui: 'back',
        text: 'Back',
        listeners: {tap: function () {
            bpack.views.cards.setActiveItem('gilistCard', {type: 'fade'});
        }}
    }]
});
bpack.views.area.card = new Ext.chart.Panel({
    id: 'areaCard',
    fullscreen: true,
    title: 'Area Chart',
    dockedItems: [{
        xtype: 'button',
        iconCls: 'help',
        iconMask: true,
        ui: 'plain',
        handler: onHelpTap
    }, {
                        xtype: 'button',
                        iconCls: 'shuffle',
                        iconMask: true,
                        ui: 'plain',
        handler: onRefreshTap
                }],
    items: {
        cls: 'area1',
        theme: 'Demo',
        store: window.storeArea,
        animate: true,
        legend: {
            position: {
                portrait: 'bottom',
                landscape: 'right'
            },
            labelFont: '20px Arial'
        },
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: axisValues,
            title: 'Number of Hits',
            minimum: 0,
            adjustMinimumByMajorUnit: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: axisName,
            title: 'Month of the Year'
        }],
        series: [{
            type: 'area',
            highlight: false,
            axis: 'left',
            xField: axisName[0],
            yField: axisValues
        }]
    }
});
